<ul class="maintabmenu multipletabmenu">
    <li class="current">
        <a href="">Cập nhật công trình</a>
    </li>    
</ul><!--maintabmenu-->

<div class="content">    
    <?php if (isset($building)) {
        ?>
        <form action="" method="post" class="stdform" id="building-add" novalidate="novalidate">        
            <input type="hidden" name="building_id" value="<?php echo $building->building_id; ?>">
            <p>
                <label>Tên</label>
                <span class="field"><input type="text" class="mediuminput" id="name" name="name" value="<?php echo $building->building_name; ?>"></span>
            </p>

            <p>
                <label>Mô tả</label>    
                <textarea id="description" class="mediuminput" name="description" rows="5" cols="80"><?php echo $building->building_info; ?></textarea>
            </p>        

            <p>
                <label>Danh mục</label>
                <span class="field">
                    <select id="category" name="category">
                        <option value="">Choose One</option>
                        <?php if (isset($categories)) { ?>
                            <?php foreach ($categories as $cat) { ?>
                                <option value="<?php echo $cat->category_id; ?>" <?php
                    if ($cat->category_id == $building->building_category_id) {
                        echo 'selected=""';
                    }
                                ?>><?php echo $cat->category_name; ?></option>
                                        <?php
                                    }
                                }
                                ?>
                    </select>
                </span>
            </p>
            <?php if (count($images) > 0) { ?>
                <div id="image-list" style="margin-left: 120px;">
                    <div class="contenttitle radiusbottom0">
                        <h2 class="image"><span>Ảnh công trình</span></h2>
                    </div>
                    <div class="tableoptions">
                        <button class="deletebutton radius3" title="table2">Delete Selected</button> &nbsp;
                    </div>
                    <table cellpadding="0" cellspacing="0" border="0" id="table2" class="stdtable mediatable">
                        <colgroup>
                            <col class="con0">
                            <col class="con1">
                            <col class="con0">
                            <col class="con1">
                            <col class="con0">
                            <col class="con1">                                     
                        </colgroup>
                        <thead>
                            <tr>
                                <td class="head0 center"><input type="checkbox" class="checkall"></td>
                                <td class="head1 center">Ảnh</td>
                                <td class="head0">Tên ảnh</td>
                                <td class="head1">Đường dẫn</td>                        
                                <td class="head0">&nbsp;</td>
                                <td class="head1">&nbsp;</td>                        
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <td class="head0 center"><input type="checkbox" class="checkall"></td>
                                <td class="head1 center">Ảnh</td>
                                <td class="head0">Tên ảnh</td>
                                <td class="head1">Đường dẫn</td>                        
                                <td class="head0">&nbsp;</td>
                                <td class="head1">&nbsp;</td>                        
                            </tr>
                        </tfoot>
                        <tbody id="paging">
                            <?php
                            $img_str = '';
                            foreach ($images as $image) {
                                $img_str.= $image->image_desc.'||';
                                ?>
                                <tr>
                                    <td class="center"><input type="checkbox" data-link="<?php echo base_url() . 'buildingimages/delete/' . $image->image_id; ?>" value="<?php echo $image->image_id; ?>"></td>
                                    <td class="center"><a href="<?php echo base_url() . $image->image_path; ?>" class="view cboxElement"><img width="40" height="40" src="<?php echo base_url() . $image->image_path; ?>" alt=""></a></td>
                                    <td><?php echo $image->image_desc; ?></td>
                                    <td><?php echo base_url() . $image->image_path; ?></td>                       
                                    <td class="center"><a href="<?php echo base_url() . $image->image_path; ?>" class="view cboxElement">View</a></td>                        
                                    <td class="center"><a href="<?php echo base_url() . 'buildingimages/delete/' . $image->image_id; ?>" class="delete">Delete</a></td>
                                </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                    
                </div>
            <?php } ?>
            <br>
            <div class="row fileupload-buttonbar">
                <div class="span7">
                    <!-- The fileinput-button span is used to style the file input field as button -->                
                    <span class="btn btn-success fileinput-button">
                        <i class="icon-plus icon-white"></i>
                        <span>Thêm ảnh...</span>
                        <input id="fileupload" type="file" data-url="<?php echo base_url(); ?>upload" name="files[]" multiple>
                    </span>
                    <br>

                    <!-- The container for the uploaded files -->
                    <div id="files" class="files"></div>
                </div>
            </div>
            <input type="hidden" id="images" name="images" value=""/>
            <p class="stdformbutton">
                <button class="submit radius2">Update Building</button>
            </p>
        </form>
    <?php } ?>
</div>
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/plugins/jquery-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/plugins/jquery.effects.core.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/plugins/jquery.effects.explode.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/plugins/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/custom/general.js"></script>
<script src="<?php echo base_url(); ?>back-end/js/plugins/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/custom/media.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/custom/tables.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/plugins/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/custom/form.js"></script>
<script src="<?php echo base_url(); ?>back-end/js/plugins/wysiwyg/jquery.wysiwyg.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>back-end/js/plugins/wysiwyg/wysiwyg.image.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>back-end/js/plugins/wysiwyg/wysiwyg.link.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>back-end/js/plugins/wysiwyg/wysiwyg.table.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>back-end/js/vendor/jquery.ui.widget.js"></script>
<script src="<?php echo base_url(); ?>back-end/js/load-image.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="<?php echo base_url(); ?>back-end/js/canvas-to-blob.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="<?php echo base_url(); ?>back-end/js/jquery.iframe-transport.js"></script>
<script src="<?php echo base_url(); ?>back-end/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="<?php echo base_url(); ?>back-end/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="<?php echo base_url(); ?>back-end/js/jquery.fileupload-image.js"></script>
<!-- The File Upload validation plugin -->
<script src="<?php echo base_url(); ?>back-end/js/jquery.fileupload-validate.js"></script>

<script type="text/javascript">
    jQuery('#description').wysiwyg({
        controls: {
            cut: {visible: true },
            copy: { visible: true },
            paste: { visible: true }
        }
    });     
    /*jQuery('.paginate_button').click(function(){
        var url = jQuery(this).children('a').attr('href');
        var link = jQuery(this);
        jQuery.get(url, null, function(data){
            jQuery('#paging').html(data);            
        });        
        var number = jQuery('.paginate_active').text();
        var url_current = url.substr(0,url.lastIndexOf('/')+1)+number;            
        var number_current = link.children('a').text();
            
        jQuery('.paginate_active').html('<a href="'+url_current+'">'+number+'</a>');
        jQuery('.paginate_active').removeClass('paginate_active').addClass('paginate_button');
            
        link.removeClass('paginate_button').addClass('paginate_active').html(number_current);
        return false;
    });*/
</script>
<script>

    jQuery(function ($) {
    
        'use strict';
        // Change this to the location of your server-side upload handler:
        var url = '<?php echo base_url() . 'upload'; ?>',
        uploadButton = $('<button/>')
        .addClass('stdbtn btn_blue')
        .prop('disabled', true)
        .text('Processing...')
        .on('click', function () {
            var $this = $(this),
            data = $this.data();
            $this
            .off('click')
            .text('Abort')
            .on('click', function () {
                $this.remove();
                data.abort();
            });
            data.submit().always(function () {
                $this.remove();
            });
            return false;
        });
        $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            autoUpload: false,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxFileSize: 5000000, // 5 MB
            // Enable image resizing, except for Android and Opera,
            // which actually support image resizing, but fail to
            // send Blob objects via XHR requests:
            disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
            previewMaxWidth: 100,
            previewMaxHeight: 100,
            previewCrop: true
        }).on('fileuploadadd', function (e, data) {
            data.context = $('<div/>').appendTo('#files');
            $.each(data.files, function (index, file) {
                //var node = $('<p/>').append($('<span/>').text(file.name));
                var node = $('<p/>').append($('<span/>').text(''));
                if (!index) {
                    node
                    .append('<br>')
                    .append(uploadButton.clone(true).data(data));
                }
                node.appendTo(data.context);
            });
        }).on('fileuploadprocessalways', function (e, data) {
            var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
            if (file.preview) {
                node
                .prepend('<br>')
                .prepend(file.preview);
            }
            if (file.error) {
                node
                .append('<br>')
                .append(file.error);
            }
            if (index + 1 === data.files.length) {
                data.context.find('button')
                .text('Upload')
                .prop('disabled', !!data.files.error);
            }
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
            'width',
            progress + '%'
        );
        }).on('fileuploaddone', function (e, data) {
            $.each(data.result.files, function (index, file) {
                var images = $('#images').val();
                images+=file.name+'||';
                $('#images').val(images);
                var link = $('<a>')
                .attr('target', '_blank')
                .prop('href', file.url);
                $(data.context.children()[index])
                .wrap(link);
            });
        }).on('fileuploadfail', function (e, data) {
            $.each(data.result.files, function (index, file) {
                var error = $('<span/>').text(file.error);
                $(data.context.children()[index])
                .append('<br>')
                .append(error);
            });
        }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
</script>